<template>
  <view>
    <action-bar :options="navOptions"></action-bar>
    <view class="manage_box">
      <!-- 全部数量及筛选 -->
      <view class="manage_box-num">
        <view class="manage_box-num-span">全部数量： {{ total }}</view>
        <view class="manage_box-num-screen">
          <view class="manage_box-num-screen-option">
            <image :src="baseImgUrl + '/manage/option.png'" mode=""></image>
          </view>
          <span class="manage_box-num-span" @click="open">筛选</span>
          <view class="manage_box-num-screen-traingle">
            <image :src="baseImgUrl + '/manage/triangle.png'" mode=""></image>
          </view>
        </view>
      </view>

      <view class="main" v-if="list.length > 0" :style="listContainerHeight">
        <scroll-view-y @refresh="refresh()" :pageNo="screening.pageNo" :pageSize="screening.pageSize" :total="total"
          @getMore="getMore()">
          <template slot="scrollView_content">
            <view class="card" v-for="(item, index) in list" :key="index" @click.stop="navTo(item.projectId)">
              <view class="title">{{ item.taskName ? item.taskName : "" }}</view>
              <view class="content">单位名称：{{ item.agencyName ? item.agencyName : "" }}</view>
              <view class="content">业主反馈：{{ item.backState == "1" ? "同意" : "未反馈" }}</view>
              <view class="content">项目名称：{{ item.projectName }}</view>
              <view class="content">执业地址：{{ item.placeName || '暂无' }}</view>
              <view class="subTitle">
                合同日期：{{
                  item.startDate ? item.startDate : "无"
                }}
                至
                {{ item.endDate ? item.endDate : "无" }}
              </view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无报告"></no-data>
    </view>

    <!-- 筛选的弹出层 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-list">
        <uni-section title="筛选" type="circle">
          <form>
            <!-- 项目名称 -->
            <view class="formItem">
              <view class="label">项目名称</view>
              <input class="content" type="text" v-model="screening.projectName" :placeholder="'请选择项目名称'" />
            </view>

            <!-- 机构名称 -->
            <view class="formItem">
              <view class="label">机构名称</view>
              <input class="content" type="text" v-model="screening.agencyInfoName" :placeholder="'请选择机构名称'" />
            </view>

            <!-- 任务名称 -->
            <view class="formItem">
              <view class="label">任务名称</view>
              <input class="content" type="text" v-model="screening.taskName" :placeholder="'请选择任务名称'" />
            </view>

            <!-- 项目状态 -->
            <view class="formItem">
              <view class="label">项目状态</view>
              <picker mode="selector" class="content" :range="stateType" range-key="dictLabel"
                @change="stateTypeChange($event)">
                <view :style="{ color: screening.projectStates ? '#333' : '#999' }">{{ screening.projectStates ||
                  '请选择项目状态' }}
                </view>
              </picker>
            </view>

            <!-- 报告编号 -->
            <view class="formItem">
              <view class="label">报告编号</view>
              <input class="content" type="text" v-model="screening.reportCode" :placeholder="'请选择合同编号'" />
            </view>

            <!-- 报告状态 -->
            <view class="formItem">
              <view class="label">报告状态</view>
              <picker mode="selector" class="content" :range="projectState" range-key="dictLabel"
                @change="projectStateChange($event)">
                <!-- <input type="text" disabled :value="screening.states" :placeholder="'请选择项目状态'" /> -->
                <view :style="{ color: screening.states ? '#333' : '#999' }">{{ screening.states ||
                  '请选择报告状态' }}
                </view>
              </picker>
            </view>

            <!-- 有无故障 -->
            <!-- <view class="formItem">
              <view class="label">有无故障</view>
              <picker mode="selector"
                      class="content"
                      :range="malfunList"
                      range-key="name"
                      @change="isInconformityChange($event)">
                <input type="text"
                       disabled
                       :value="screening.isInconformitys"
                       :placeholder="'请选择有无故障'" />
              </picker>
            </view> -->

            <!-- 所属区域 -->
            <!-- <view class="formItem"
                  v-if="show">
              <view class="label">所属区域</view>
              <input class="content"
                     v-model="screening.areas"
                     disabled="true"
                     @tap="openLevel"
                     placeholder="请选择所属区域" />
              <level-linkage ref="levelLinkage"
                             :pickerValueDefault="pickerValueDefault"
                             :allData="treeData"
                             @onConfirm="onConfirm"
                             themeColor='#007AFF'></level-linkage>
            </view> -->

          </form>
        </uni-section>
        <view class="popup-list-btn">
          <view class="btn" @click="close"> 重置 </view>
          <view class="btn" @click="sure"> 确定 </view>
        </view>
      </view>
    </uni-popup>

    <toast></toast>
  </view>
</template>

<script>
import { baseImgUrl } from "@/config.js";
import scrollViewY from "@/components/scrollViewY/index";
import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
export default {
  components: {
    scrollViewY,
    levelLinkage
  },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList,
    };
  },
  data() {
    return {
      baseImgUrl: baseImgUrl,
      // pickerValueDefault: [0, 0, 0],
      // treeData: [], // 所属区域
      navOptions: {
        left: {
          icon: "back",
        },
        center: {
          title: "报告列表",
        },
      },
      list: [],
      stateType: [],
      projectState: [],
      malfunList: [{
        id: 0,
        name: '无'
      }, {
        id: 1,
        name: '有'
      }], // 是否故障
      total: 0,
      dataStatus: "刷新", // 用于解决闪烁问题

      screening: {
        projectName: '',
        agencyInfoName: '',
        taskName: '',
        projectState: '',
        projectStates: '',
        reportCode: '',
        state: '',
        states: '',
        // areas: '',
        // isInconformity: '',
        // isInconformitys: '',
        pageNo: 1,
        pageSize: 10,
        loading: false,
      },
      // show: false
    };
  },
  created() {
    // this.getTreelists()
    this.getSatetType()
    this.getList();
  },
  methods: {
    getSatetType() {
      this.$getDict('project_state').then(res => {
        this.stateType = res
      })
      this.$getDict('reportType').then(res => {
        this.projectState = res
      })
    },
    stateTypeChange(e) {
      this.screening.projectState = this.stateType[e.detail.value].dictValue;
      this.screening.projectStates = this.stateType[e.detail.value].dictLabel;
    },
    projectStateChange(e) {
      this.screening.state = this.projectState[e.detail.value].dictValue;
      this.screening.states = this.projectState[e.detail.value].dictLabel;
    },
    isInconformityChange(e) {
      this.screening.isInconformity = this.malfunList[e.detail.value].id;
      this.screening.isInconformitys = this.malfunList[e.detail.value].name;
    },
    // 跳转至表单
    navTo(item) {
      uni.navigateTo({
        url: "../../pages_workTableChild/reportView/form?id=" + item,
        success: () => { },
      });
    },
    // 获取信息列表
    getList() {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store.dispatch("report_list", this.screening).then((res) => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
      });
    },
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.screening.pageNo = 1;
    },
    // 上拉加载
    getMore() {
      if (this.screening.pageNo * this.screening.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.screening.pageNo++;
      }
    },
    open() {
      this.$refs.popup.open("top");
    },
    // 筛选的确定按钮
    sure() {
      this.screening.pageNo = 1
      this.getList().then((res) => {
        this.list = res.items;
        this.$refs.popup.close();
      });
    },
    // 筛选的取消按钮
    close() {
      this.screening = {
        projectName: '',
        agencyInfoName: '',
        taskName: '',
        projectState: '',
        projectStates: '',
        reportCode: '',
        state: '',
        states: '',
        // isInconformity: '',
        // isInconformitys: '',
        pageNo: 1,
        pageSize: 10,
      }
      // this.getList().then((res) => {
      //   this.list = res.items;
      //   this.$refs.popup.close();
      // });
    },
    openLevel() {
      this.$refs.levelLinkage.open();
    },
    // getTreelists () {
    //   this.$store.dispatch('getAreaTreeApi').then(res => {
    //     if (res.length != 0) {
    //       this.treeData = res.data
    //       this.show = true
    //     }
    //   })
    // },
    onConfirm(e) {
      // e 确认后选中的数据
      this.screening.areas = e.name
      this.screening.area = e.thirdPick.parentId
      // this.judgCompanyCode()
      console.log(e)
    },
  },
  computed: {
    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },
    // 高度 =  100vh - 导航栏高度 - 状态栏高度 -  菜单高度
    listContainerHeight() {
      // 顶部状态栏 + 标题栏的高度 单位px
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      if (actionBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + navigationBarHeight + 50) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 80rpx - 100rpx);";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.manage_box {
  padding: 0 24rpx;
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
  min-height: calc(100vh - 80rpx);

  .main {

    .card {
      border-radius: 24rpx;
      background: white;
      padding: 24rpx;
      position: relative;
      margin-bottom: 24rpx;

      .title {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
      }

      .subTitle {
        color: #999;
      }

      &:after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        padding: 6rpx 12px;
        border-radius: 0 20rpx;
      }
    }

    // 报告状态 审核中
    .card.submitted {
      &::after {
        content: "审核中";
        background-color: #345ac7;
      }
    }

    // 报告状态 未提交
    .card.unsubmitted {
      &::after {
        content: "未提交";
        background-color: #e81a1a;
      }
    }

    // 报告状态 已生效
    .card.inForce {
      &::after {
        content: "未提交";
        background-color: #36e042;
      }
    }

    // 报告状态 已撤销
    .card.revoked {
      &::after {
        content: "已撤销";
        background-color: #999;
      }
    }
  }

  &-num {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-content: center;
    height: 40px;
    line-height: 40px;

    &-span {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
    }

    &-screen {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-option {
        width: 29rpx;
        height: 26rpx;
        margin-right: 9rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      &-traingle {
        margin-left: 14rpx;
        margin-top: -5rpx;
        width: 14rpx;
        height: 7rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.popup-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 80rpx;
  padding: 20rpx;

  /deep/.uni-section {
    margin-top: 0;
  }

  .formItem {
    display: flex;
    align-items: center;
    height: 80rpx;

    .label {
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 36rpx;
      width: 40%;
    }

    .content {
      flex: 1;
      text-align: right;
      font-size: 28rpx;
      color: #999
    }
  }

  &-btn {
    height: 80rpx;
    line-height: 80rpx;
    width: 100%;
    display: flex;

    .btn {
      flex: 1;
      text-align: center;
      border-radius: 20rpx;
      border: 1rpx solid $OVERALL_SITUATION_BACKGROUND;
      margin: 0 20rpx;
    }

    .btn:nth-child(1) {
      background: $OVERALL_CLOSE_BUTTON_COLOR;
      color: $OVERALL_SITUATION_BACKGROUND;
    }

    .btn:nth-child(2) {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      color: #ffffff;
    }
  }
}

::v-deep .uni-input-placeholder {
  color: #999
}
</style>
